<template>
  <div ref="el" class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="dataScreen-header flex-space-between">
        <div class="header-lf">
          <span class="header-screening">今日入校数据统计</span>
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>智慧校园</span>
          </div>
        </div>
        <div class="header-ri">
          <span class="header-time">{{ time }}</span>
          <div @click="toggle" style="padding-top: 5px;">
            <img src="../images/full-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="main-lf">
          <div class="dataScreen-top">
            <div class="screen-panel_title flex-center">
              <div class="title">校园基础数据</div>
            </div>
            <div class="basic-statistics flex-space-between">
              <div class="basic-statistics-item">
                <div class="count">{{ baseInfoData.studentNum }}</div>
                <div>学生人数</div>
              </div>
              <div class="basic-statistics-item">
                <div class="count">{{ baseInfoData.staffNum }}</div>
                <div>教职工数</div>
              </div>
              <div class="basic-statistics-item">
                <div class="count">{{ baseInfoData.classNum }}</div>
                <div>班级数</div>
              </div>
            </div>
            <div class="dataScreen-main-chart">
              <RealTimeAccessChart v-if="accommodationStatData" :accommodationStatData="accommodationStatData" />
            </div>
          </div>
          <div class="dataScreen-center">
            <!-- <div class="screen-panel_title flex-center">
              <div class="title">设备运行状态</div>
            </div>
            <div class="basic-statistics flex-space-between">
              <div class="basic-statistics-item">
                <div>分析盒</div>
                <div class="count">
                  <div style="color: #00DEE3;">正常</div>
                  <div style="color: #00DEE3;">1</div>
                  <div style="color: #FF549D">异常</div>
                  <div style="color: #FF549D">1</div>
                </div>
                <RealTimeAccessChart2 />
              </div>
              <div class="basic-statistics-item">
                <div>人脸识别机</div>
                <div class="count">
                  <div style="color: #00DEE3;">正常</div>
                  <div style="color: #00DEE3;">1</div>
                  <div style="color: #FF549D">异常</div>
                  <div style="color: #FF549D">1</div>
                </div>
                <RealTimeAccessChart2 />
              </div>
              <div class="basic-statistics-item">
                <div>摄像头</div>
                <div class="count">
                  <div style="color: #00DEE3;">正常</div>
                  <div style="color: #00DEE3;">1</div>
                  <div style="color: #FF549D">异常</div>
                  <div style="color: #FF549D">1</div>
                </div>
                <RealTimeAccessChart2 />
              </div>
            </div> -->
          </div>
          <div class="dataScreen-bottom">
            <!-- <div class="screen-panel_title flex-center">
              <div class="title">今日进出分时态势</div>
            </div>
            <div class="dataScreen-main-chart">
              <RealTimeAccessChart1 />
            </div> -->
          </div>
        </div>
        <div class="main-ct">
          <div class="dataScreen-top">
            <div class="top-box">
              <div class="tabs-box flex-center">
                <div class="tabs-box-item">全校学生出勤情况</div>
                <!-- <div class="tabs-box-item">全校教职工出勤情况</div> -->
              </div>
              <div class="statistics-box">
                <div class="statistics-box-item">
                  <div class="item-title flex-center">
                    <img class="item-img" src="../images/item1.png" alt="" />
                    应到
                  </div>
                  <div class="item-num flex-center">
                    <div class="num-bg" v-for="(item, index) in shouldNum" :key="index">
                      {{ item }}
                    </div>
                  </div>
                </div>
                <div class="statistics-box-item">
                  <div class="item-title flex-center">
                    <img class="item-img" src="../images/item2.png" alt="" />
                    已到
                  </div>
                  <div class="item-num flex-center">
                    <div class="num-bg" v-for="(item, index) in reallyNum" :key="index">
                      {{item }}
                    </div>
                  </div>
                </div>
                <div class="statistics-box-item">
                  <div class="item-title flex-center">
                    <img class="item-img" src="../images/item3.png" alt="" />
                    未到
                  </div>
                  <div class="item-num flex-center">
                    <div class="num-bg" v-for="(item, index) in notNum" :key="index">
                      {{ item }}
                    </div>
                  </div>
                </div>
                <div class="statistics-box-item">
                  <div class="item-title flex-center">
                    <img class="item-img" src="../images/item4.png" alt="" />
                    请假
                  </div>
                  <div class="item-num flex-center">
                    <div class="num-bg" v-for="(item, index) in leaveNum" :key="index">
                      {{ item }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="top-box-main">
                <div class="ranking-list-box">
                  <div class="title-box">
                    <div class="title">今日各班级到校出勤率排行榜</div>
                  </div>
                  <div class="main">
                    <template v-if="classDayStatData.length">
                      <div class="item" v-for="(item, index) in classDayStatData" :key="index">
                        <div class="index">
                          <template v-if="index < 3">
                            <img v-if="index === 0" class="index-img" src="../images/index1.png" alt="" />
                            <img v-if="index === 1" class="index-img" src="../images/index2.png" alt="" />
                            <img v-if="index === 2" class="index-img" src="../images/index3.png" alt="" />
                          </template>
                          <template v-else>
                            <div class="index-num">{{ index + 1 }}</div>
                          </template>
                        </div>
                        <div class="class">{{ item.className }}</div>
                        <div class="progress bg-line bg">
                          <div class="line inner" :style="{ width: item.presenceCentage + '%' }"></div>
                        </div>
                        <div class="num">{{ item.presenceCentage + '%' }}</div>
                      </div>
                    </template>
                    <div v-else class="no-data-box">
                      <img src="../images/no-data.png" alt="" />
                      毫无数据
                    </div>
                    <!-- <div class="item">
                      <div class="index"><img class="index-img" src="../images/index2.png" alt="" /></div>
                      <div class="class">2021 (1) 班</div>
                      <div class="progress bg-line bg">
                        <div class="line inner" :style="{ width: 50 + '%' }"></div>
                      </div>
                      <div class="num">{{ 50 + '%' }}</div>
                    </div>
                    <div class="item">
                      <div class="index">4</div>
                      <div class="class">三年级 (1) 班</div>
                      <div class="progress bg-line bg">
                        <div class="line inner" :style="{ width: 50 + '%' }"></div>
                      </div>
                      <div class="num">{{ 50 + '%' }}</div>
                    </div> -->
                  </div>
                </div>
                <div class="days-attendance">
                  <div class="title-box">
                    <div class="title">近7日考勤打开情况</div>
                  </div>
                  <Line :lineData="shitInoutStatData" seriesName="考勤率" />
                </div>
              </div>
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="tab-box">
              <div class="tab-item flex-center" v-for="(item, index) in tabsData" :key="index" @click="tabItemClick(index)">
                <div v-if="index === tabItemIndex" class="active"></div>
                {{ item }}
              </div>
            </div>
            <template v-if="recordList1.length">
              <div class="scroll-box">
                <vue3-seamless-scroll :list="recordList1" direction="left" hover>
                  <div class="scroll-box-wrap">
                    <div class="item" v-for="(item, index) in recordList1" :key="index">
                      <div class="img-box">
                        <img class="index-img" :src="item.capturePhoto || 'https://via.placeholder.com/100'" @error="defaultImg" alt="" />
                      </div>
                      <div class="name">{{ item.userId ? item.userName : '陌生人' }}</div>
                      <div>{{ item.clockingTime }}</div>
                    </div>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </template>
            <div v-else class="no-data-box" style="top:60%">
              <img src="../images/no-data.png" alt="" />
              毫无数据
            </div>
          </div>
        </div>
        <div class="main-ri">
          <div class="dataScreen-top">
            <div class="screen-panel_title flex-center">
              <div class="title">实时记录</div>
            </div>
            <template v-if="recordList.length">
              <div class="item-box">
                <vue3-seamless-scroll :list="recordList" hover v-model="scroll">
                  <div class="scroll-box-wrap">
                    <div class="item" v-for="(item, index) in recordList" :key="index">
                      <div class="img-box">
                        <img class="item-img" :src="item.capturePhoto || 'https://via.placeholder.com/100'" @error="defaultImg" alt="" />
                      </div>
                      <div>
                        <div class="name">{{ item.userId ? item.userName : '陌生人' }}</div>
                        <div class="time">
                          <el-icon>
                            <PieChart />
                          </el-icon>
                          {{ item.clockingTime }}
                        </div>
                        <div>
                          <el-icon>
                            <LocationInformation />
                          </el-icon>
                          {{ item.deviceName }}
                        </div>
                      </div>
                    </div>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </template>
            <div v-else class="no-data-box">
              <img src="../images/no-data.png" alt="" />
              毫无数据
            </div>
          </div>
          <div class="dataScreen-center">
            <!-- <div class="screen-panel_title flex-center">
              <div class="title">今日访客记录</div>
            </div>
            <div class="item-box">
              <div class="table-header">
                <div class="header-item">姓名</div>
                <div class="header-item">事由</div>
                <div class="header-item">到访时间</div>
                <div class="header-item">状态</div>
              </div>
              <div class="table-main">
                <div class="main-item">
                  <div class="item">林依依家长</div>
                  <div class="item">拜访杨主任</div>
                  <div class="item">12:50</div>
                  <div class="item status">未到访</div>
                </div>
                <div class="main-item">
                  <div class="item">林依依家长</div>
                  <div class="item">拜访杨主任</div>
                  <div class="item">12:50</div>
                  <div class="item status">未到访</div>
                </div>
                <div class="main-item">
                  <div class="item">林依依家长</div>
                  <div class="item">拜访杨主任</div>
                  <div class="item">12:50</div>
                  <div class="item status">未到访</div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataScreen">
import { baseInfo, accommodationStat, studentDayStat, classDayStat, deviceClockingRecordList, shitInoutStat } from '@/api/bigScreen';
import { useDateFormat, useFullscreen } from '@vueuse/core';
import Line from '../components/Line.vue';
import { LocationInformation, PieChart } from '@element-plus/icons-vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import RealTimeAccessChart from '../components/RealTimeAccessChart.vue';

const el = ref<HTMLElement>();
const scroll = ref<any>(true);
const { toggle } = useFullscreen(el);
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const dataScreenRef = ref<HTMLElement | null>(null);
const tabsData = ref(['校门口', '教学楼', '宿舍楼', '公共区域']);
const tabItemIndex = ref(0);
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener('resize', resize);
  init();
});
const getSchoolRecordList = async (index: number) => {
  const recordListRes1 = await deviceClockingRecordList({ area: index + 1 });
  recordList1.value = recordListRes1.rows.map((item: any) => {
    item.clockingTime = useDateFormat(item.clockingTime, 'HH:mm:ss');
    return item;
  });
};
// 设置响应式
const baseInfoData = ref<any>({});
const accommodationStatData = ref<any>({});
const studentDayStatData = ref<any>({});
const classDayStatData = ref<any>({});
const recordList = ref<any>({});
const recordList1 = ref<any>({});
const shitInoutStatData = ref<any>({});

const init = async () => {
  const res = await baseInfo();
  baseInfoData.value = res.data;
  const accRes = await accommodationStat();
  accommodationStatData.value = accRes.data;
  const studentDayStatRes = await studentDayStat();
  studentDayStatData.value = studentDayStatRes.data;
  const classDayStatRes = await classDayStat();
  classDayStatData.value = classDayStatRes.data;
  const recordListRes = await deviceClockingRecordList({ persionType: 2 });
  recordList.value = recordListRes.rows;
  const shitInoutStatRes = await shitInoutStat();
  shitInoutStatData.value = shitInoutStatRes.data;
  console.log(shitInoutStatData.value, 'shitInoutStatData.value');
  getSchoolRecordList(0);
};
// normalNum 正常
// arriveLateNum 迟到
// absenceNum  缺勤
// leaveNum 请假
// leaveEarlyNum 早退
// 应到 = 正常考勤数+迟到+早退+缺勤+请假；
// 实到 = 正常考勤数+迟到+早退；
// 未到=请假+缺勤
const formatToFourDigits = (number: any) => {
    const num = number || 0
    let numStr = num.toString();
    let formattedStr = numStr.padStart(4, '0');
    return formattedStr;
}
const shouldNum = computed(() => {
  return formatToFourDigits(studentDayStatData?.value?.normalNum + studentDayStatData?.value?.arriveLateNum + studentDayStatData?.value?.absenceNum + studentDayStatData?.value?.leaveNum + studentDayStatData?.value?.leaveEarlyNum)
})
const reallyNum = computed(() => {
  return formatToFourDigits(studentDayStatData?.value?.normalNum + studentDayStatData?.value?.arriveLateNum + studentDayStatData?.value?.leaveEarlyNum)
})
const notNum = computed(() => {
  return formatToFourDigits(studentDayStatData?.value?.leaveNum + studentDayStatData?.value?.absenceNum)
})
const leaveNum = computed(() => {
  return formatToFourDigits(studentDayStatData?.value?.leaveNum)
})
// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};
// 切换不同区域
const tabItemClick = async (index: number) => {
  tabItemIndex.value = index;
  getSchoolRecordList(index);
};
const defaultImg = (e: any) => {
  e.target.src = 'https://via.placeholder.com/100';
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
const formatDate = () => {
  // 获取当前时间
  const now = new Date();
  // 获取年、月、日、时、分、秒
  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1
  const day = ('0' + now.getDate()).slice(-2);
  const hours = ('0' + now.getHours()).slice(-2);
  const minutes = ('0' + now.getMinutes()).slice(-2);
  const seconds = ('0' + now.getSeconds()).slice(-2);
  const formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
  // 格式化输出
  return formattedTime;
};
// 获取当前时间
let timer;
let time = ref(formatDate());
timer = setInterval(() => {
  time.value = formatDate();
}, 1000);

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
  clearInterval(timer);
});
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>
